wip

primer · Feb 1, 2024 · 57ca658 · 57ca658
1 parent 11e6ab1
commit 57ca658
Show file tree

Hide file tree

Showing 6 changed files with 678 additions and 0 deletions.
diff --git a/packages/design-tokens/src/tokens/functional/components/pricing-cards/base.json b/packages/design-tokens/src/tokens/functional/components/pricing-cards/base.json
@@ -0,0 +1,5 @@
+{
+  "brand": {
+    "PricingCards": {}
+  }
+}
diff --git a/packages/react/src/PricingCards/PricingCards.features.stories.tsx b/packages/react/src/PricingCards/PricingCards.features.stories.tsx
@@ -0,0 +1,168 @@
+import React from 'react'
+import {StoryFn, Meta} from '@storybook/react'
+import {PricingCards} from '.'
+import {Box, Grid, ThemeProvider} from '..'
+
+const decorators = Story => (
+  <ThemeProvider colorMode="auto">
+    <Box
+      backgroundColor="subtle"
+      paddingBlockStart="spacious"
+      paddingBlockEnd="spacious"
+      style={{
+        ['--brand-color-accent-primary']: 'var(--base-color-scale-purple-4)',
+      }}
+    >
+      <Grid>
+        <Grid.Column span={12}>
+          <Story />
+        </Grid.Column>
+      </Grid>
+    </Box>
+  </ThemeProvider>
+)
+
+export default {
+  title: 'Components/PricingCards/features',
+  component: PricingCards,
+  decorators: [decorators],
+} as Meta<typeof PricingCards>
+
+export const OneItem: StoryFn<typeof PricingCards> = () => {
+  return (
+    <PricingCards>
+      <PricingCards.Item>
+        <PricingCards.Label>Recommended</PricingCards.Label>
+        <PricingCards.Heading>Copilot</PricingCards.Heading>
+        <PricingCards.Description>Copilot in the coding environment.</PricingCards.Description>
+        <PricingCards.Price trailingText="per user / month">Included</PricingCards.Price>
+        <PricingCards.FeatureList>
+          <PricingCards.FeatureListItem variant="highlight">
+            Everything in Copilot Business plus:
+          </PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Chat in IDE and Mobile</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>CLI assistance</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Code completions</PricingCards.FeatureListItem>
+        </PricingCards.FeatureList>
+        <PricingCards.PrimaryAction href="/buy">Buy now</PricingCards.PrimaryAction>
+        <PricingCards.SecondaryAction href="/contact">Contact sales</PricingCards.SecondaryAction>
+      </PricingCards.Item>
+    </PricingCards>
+  )
+}
+
+export const TwoItems: StoryFn<typeof PricingCards> = () => {
+  return (
+    <PricingCards>
+      <PricingCards.Item>
+        <PricingCards.Label>Recommended</PricingCards.Label>
+        <PricingCards.Heading>Copilot</PricingCards.Heading>
+        <PricingCards.Description>Copilot in the coding environment.</PricingCards.Description>
+        <PricingCards.Price trailingText="per user / month">Included</PricingCards.Price>
+        <PricingCards.FeatureList>
+          <PricingCards.FeatureListItem variant="highlight">
+            Everything in Copilot Business plus:
+          </PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Chat in IDE and Mobile</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>CLI assistance</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Code completions</PricingCards.FeatureListItem>
+        </PricingCards.FeatureList>
+        <PricingCards.PrimaryAction href="/buy">Buy now</PricingCards.PrimaryAction>
+        <PricingCards.SecondaryAction href="/contact">Contact sales</PricingCards.SecondaryAction>
+      </PricingCards.Item>
+      <PricingCards.Item>
+        <PricingCards.Label>Recommended</PricingCards.Label>
+        <PricingCards.Heading>Copilot Business</PricingCards.Heading>
+        <PricingCards.Description>
+          Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
+          Enterprise Cloud.
+        </PricingCards.Description>
+        <PricingCards.Price currencySymbol="$" trailingText="per user / month">
+          39
+        </PricingCards.Price>
+        <PricingCards.FeatureList>
+          <PricingCards.FeatureListItem variant="highlight">
+            Everything in Copilot Business plus:
+          </PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Chat in IDE and Mobile</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>CLI assistance</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Code completions</PricingCards.FeatureListItem>
+        </PricingCards.FeatureList>
+        <PricingCards.PrimaryAction href="/buy">Join waitlist</PricingCards.PrimaryAction>
+      </PricingCards.Item>
+    </PricingCards>
+  )
+}
+
+export const ThreeItems: StoryFn<typeof PricingCards> = () => {
+  return (
+    <PricingCards>
+      <PricingCards.Item>
+        <PricingCards.Heading>Copilot Individual</PricingCards.Heading>
+        <PricingCards.Description>
+          Code completions, Chat, and more for indie developers and freelancers.
+        </PricingCards.Description>
+        <PricingCards.Price currencySymbol="$" trailingText="per month / $100 per year">
+          10
+        </PricingCards.Price>
+        <PricingCards.FeatureList>
+          <PricingCards.FeatureListItem variant="highlight">
+            Everything in Copilot Business plus:
+          </PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Code completions</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Chat in IDE and Mobile</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>CLI assistance</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Security vulnerability filter</PricingCards.FeatureListItem>
+        </PricingCards.FeatureList>
+
+        <PricingCards.PrimaryAction href="/buy">Buy now</PricingCards.PrimaryAction>
+        <PricingCards.SecondaryAction href="/contact">Contact sales</PricingCards.SecondaryAction>
+      </PricingCards.Item>
+      <PricingCards.Item>
+        <PricingCards.Label>Recommended</PricingCards.Label>
+        <PricingCards.Heading>Copilot Business</PricingCards.Heading>
+        <PricingCards.Description>Copilot personalized to your organization.</PricingCards.Description>
+        <PricingCards.Price currencySymbol="$" trailingText="per user / month">
+          19
+        </PricingCards.Price>
+        <PricingCards.FeatureList>
+          <PricingCards.FeatureListItem variant="highlight">
+            Everything in Copilot Individual plus:
+          </PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Chat in IDE and Mobile</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>CLI assistance</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Security vulnerability filter</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Code referencing</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Public code filter</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>IP indemnity</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>
+            Enterprise-grade security, safety, and privacy
+          </PricingCards.FeatureListItem>{' '}
+        </PricingCards.FeatureList>
+        <PricingCards.PrimaryAction href="/buy">Buy now</PricingCards.PrimaryAction>
+        <PricingCards.SecondaryAction href="/contact">Contact sales</PricingCards.SecondaryAction>
+      </PricingCards.Item>
+      <PricingCards.Item>
+        <PricingCards.Label>Available Feb 2024</PricingCards.Label>
+        <PricingCards.Heading>Copilot Enterprise</PricingCards.Heading>
+        <PricingCards.Description>
+          Copilot personalized to your organization throughout the software development lifecycle. Requires GitHub
+          Enterprise Cloud.
+        </PricingCards.Description>
+        <PricingCards.Price currencySymbol="$" trailingText="per user / month">
+          39
+        </PricingCards.Price>
+        <PricingCards.FeatureList>
+          <PricingCards.FeatureListItem variant="highlight">
+            Everything in Copilot Business plus:
+          </PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Chat in IDE and Mobile</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>CLI assistance</PricingCards.FeatureListItem>
+          <PricingCards.FeatureListItem>Code completions</PricingCards.FeatureListItem>
+        </PricingCards.FeatureList>
+        <PricingCards.PrimaryAction href="/buy">Buy now</PricingCards.PrimaryAction>
+        <PricingCards.SecondaryAction href="/contact">Contact sales</PricingCards.SecondaryAction>
+      </PricingCards.Item>
+    </PricingCards>
+  )
+}
diff --git a/packages/react/src/PricingCards/PricingCards.module.css b/packages/react/src/PricingCards/PricingCards.module.css
@@ -0,0 +1,179 @@
+.PricingCards {
+  --pricing-cards-column-gap: var(--base-size-96);
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-template-areas:
+    'label'
+    'heading'
+    'description'
+    'price'
+    'feature-list'
+    'footer';
+}
+
+/*
+ * Single column layout
+ */
+
+.PricingCards--items-1 {
+  /* TODO: Horizontal layout */
+}
+
+/*
+ * Two column layout
+ */
+
+.PricingCards--items-2 {
+  padding-block: var(--base-size-48);
+  padding-inline: var(--base-size-64);
+  border-radius: var(--brand-borderRadius-xlarge);
+  border: solid 1px var(--brand-color-border-default);
+  background-color: var(--brand-color-canvas-default);
+  column-gap: calc(var(--pricing-cards-column-gap) * 2);
+}
+
+.PricingCards--items-2 .PricingCards__item:nth-child(2)::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  width: 1px;
+  margin-inline-start: calc(var(--pricing-cards-column-gap) * -1);
+  background-color: var(--brand-color-border-default);
+}
+
+/*
+ * Three column layout
+ */
+
+.PricingCards--items-3 {
+  column-gap: var(--base-size-32);
+}
+
+.PricingCards--items-3 .PricingCards__item {
+  padding-block: var(--base-size-48);
+  padding-inline: var(--base-size-32);
+  border-radius: var(--brand-borderRadius-xlarge);
+  border: solid 1px var(--brand-color-border-default);
+  background-color: var(--brand-color-canvas-default);
+}
+
+/*
+ * Item
+ */
+
+.PricingCards__item {
+  position: relative;
+  display: grid;
+  grid-row: label / actions;
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+}
+
+/*
+ * Backwards compatibility for browsers that don't support subgrid.
+ * Can be remove fully once subgrid is supported in the last 3 major versions of Safari.
+ * https://caniuse.com/?search=subgrid
+ */
+@supports not (grid-template-rows: subgrid) {
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  grid-template-areas:
+    'label'
+    'heading'
+    'description'
+    'price'
+    'feature-list'
+    'actions';
+}
+
+/*
+ * Content
+ */
+
+.PricingCards__label {
+  grid-row: label;
+  padding-inline: 0;
+  color: var(--brand-color-accent-primary);
+}
+
+.PricingCards__heading {
+  grid-row: heading;
+  margin-block-start: var(--base-size-8);
+  margin-block-end: var(--base-size-16);
+}
+
+.PricingCards__description {
+  grid-row: description;
+}
+
+.PricingCards__price {
+  display: flex;
+  gap: var(--base-size-12);
+  grid-row: price;
+  padding-block: var(--base-size-24);
+}
+
+.PricingCards__feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-8);
+  grid-row: feature-list;
+  border-top: solid 1px var(--brand-color-border-default);
+  padding-block: var(--base-size-24);
+  margin: 0;
+  padding-inline: 0;
+}
+
+.PricingCards__feature-list-item {
+}
+
+/* TODO: Replace once UnorderedList items support custom colors */
+.PricingCards__feature-list-item svg {
+  fill: var(--brand-color-accent-primary);
+}
+
+.PricingCards__actions {
+  grid-row: actions;
+  display: flex;
+  gap: var(--base-size-8);
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.PricingCards--items-3 .PricingCards__actions {
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+.PricingCards__actions > * {
+  flex: 1 0 auto;
+  white-space: nowrap;
+}
+
+@media (min-width: 40rem) {
+  .PricingCards__actions {
+    flex-wrap: nowrap;
+  }
+}
+
+.PricingCards__primary-action,
+.PricingCards__secondary-action {
+  flex: 1 1 auto;
+}
+
+.PricingCards__secondary-action {
+}
+
+.PricingCards__price-currency-symbol {
+  line-height: 1.4;
+}
+
+.PricingCards__price-value {
+  font-size: 56px;
+  line-height: 1;
+}
+
+.PricingCards__price-trailing-text {
+  align-self: center;
+}
diff --git a/packages/react/src/PricingCards/PricingCards.module.css.d.ts b/packages/react/src/PricingCards/PricingCards.module.css.d.ts
@@ -0,0 +1,21 @@
+declare const styles: {
+  readonly "PricingCards": string;
+  readonly "PricingCards--items-1": string;
+  readonly "PricingCards--items-2": string;
+  readonly "PricingCards__item": string;
+  readonly "PricingCards--items-3": string;
+  readonly "PricingCards__label": string;
+  readonly "PricingCards__heading": string;
+  readonly "PricingCards__description": string;
+  readonly "PricingCards__price": string;
+  readonly "PricingCards__feature-list": string;
+  readonly "PricingCards__feature-list-item": string;
+  readonly "PricingCards__actions": string;
+  readonly "PricingCards__primary-action": string;
+  readonly "PricingCards__secondary-action": string;
+  readonly "PricingCards__price-currency-symbol": string;
+  readonly "PricingCards__price-value": string;
+  readonly "PricingCards__price-trailing-text": string;
+};
+export = styles;
+