merge with master

grommet · Oct 16, 2024 · 7ab413e · 7ab413e
2 parents f5019b4 + a7b381a
commit 7ab413e
Show file tree

Hide file tree

Showing 247 changed files with 50,277 additions and 1,455 deletions.
diff --git a/.github/workflows/sync-figma-to-tokens.yml b/.github/workflows/sync-figma-to-tokens.yml
@@ -2,15 +2,14 @@ name: Sync Figma variables to tokens
 on:
   workflow_dispatch:
     inputs:
-      file_key:
-        description: 'The file key of the Figma file to be updated'
-        required: true
       branch:
         type: choice
         description: Which branch to update
         options:
-          - design-tokens-alpha
-          - design-tokens
+          - master
+  schedule:
+    # Run this workflow everyday at 16.00 UTC
+    - cron: '0 16 * * *'
 jobs:
   sync-figma-to-tokens:
     runs-on: ubuntu-latest
@@ -32,18 +31,24 @@ jobs:
 
       - name: Install dependencies
         run: yarn install
+        working-directory: design-tokens
 
       - name: Sync variables in Figma file to tokens
         run: yarn sync-figma-to-tokens -- --output tokens
+        working-directory: design-tokens
         env:
-          FILE_KEY: ${{ github.event.inputs.file_key }}
+          FILE_KEY_PRIMITIVE: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_PRIMITIVE }}
+          FILE_KEY_SEMANTIC: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_SEMANTIC }}
+          FILE_KEY_COMPONENT: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_COMPONENT }}
           PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_ACTION_VARIABLES_SYNC_FIGMA_TOKEN }}
-
+      - name: Format token files with prettier
+        run: yarn prettier tokens --write
+        working-directory: design-tokens
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@v5
         with:
           commit-message: Update tokens from Figma
           title: Update tokens from Figma
-          body: 'Update tokens from Figma from file: https://www.figma.com/file/${{ github.event.inputs.file_key }}'
+          body: 'Update tokens from Figma from tokens files'
           base: ${{ github.event.inputs.branch }}
           branch: update-tokens
diff --git a/.github/workflows/sync-tokens-to-figma.yml b/.github/workflows/sync-tokens-to-figma.yml
@@ -2,7 +2,9 @@ name: Sync tokens to Figma
 on:
   push:
     branches:
-      - design-tokens
+      - design-tokens-alpha
+    paths:
+      - design-tokens/**
 
 jobs:
   sync-tokens-to-figma:
@@ -11,7 +13,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18.16.0'
+          node-version: '18.18.0'
 
       - name: Set NPM version
         run: npm install -g [email protected]
@@ -20,12 +22,14 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Install dependencies
-        run: npm install
+        run: yarn install
         working-directory: design-tokens
 
       - name: Sync tokens to Figma file
-        run: npm run sync-tokens-to-figma
+        run: yarn sync-tokens-to-figma
         working-directory: design-tokens
         env:
-          FILE_KEY: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY }}
+          FILE_KEY_PRIMITIVE: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_PRIMITIVE }}
+          FILE_KEY_SEMANTIC: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_SEMANTIC }}
+          FILE_KEY_COMPONENT: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_COMPONENT }}
           PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_ACTION_VARIABLES_SYNC_FIGMA_TOKEN }}
diff --git a/.github/workflows/testcafe.yml b/.github/workflows/testcafe.yml
@@ -19,12 +19,16 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '18.17.x'
+          node-version: '18.18.x'
       - name: Install latest dependencies
         run: yarn upgrade
         working-directory: aries-site
       - name: Log Git Repository
         run: echo "$GITHUB_REPOSITORY"
+      # Ensure a build of design tokens is available
+      - name: Create design tokens build
+        run: yarn build
+        working-directory: design-tokens
       - name: Create production build
         run: yarn build
         working-directory: aries-site

diff --git a/...ows/update-design-tokens-alpha-stable.yml → ...workflows/update-design-tokens-stable.yml b/...ows/update-design-tokens-alpha-stable.yml → ...workflows/update-design-tokens-stable.yml
@@ -1,11 +1,13 @@
-name: Update design-tokens-alpha-stable
+name: Update design-tokens-stable
 on:
   push:
     branches:
-      - design-tokens-alpha
+      - master
+    paths:
+      - design-tokens/**
 
 jobs:
-  update-design-tokens-alpha-stable:
+  update-design-tokens-stable:
     runs-on: ubuntu-latest
     steps:
       - name: Install Node.js
@@ -26,12 +28,20 @@ jobs:
       - name: Build
         run: yarn build
         working-directory: design-tokens
-
-      - name: Update design-tokens-alpha-stable
+      - name: Update design-tokens-stable
         run: |
           git config --global user.name "Grommet Community Bot"
           git config --global user.email "[email protected]"
           yarn release-stable
         working-directory: design-tokens
         env:
           GH_TOKEN: ${{ secrets.GH_ACTION_ACCESS_TOKEN }}
+      # If stable is successfully update, push the same updates to Figma
+      - name: Sync tokens to Figma file
+        run: yarn sync-tokens-to-figma
+        working-directory: design-tokens
+        env:
+          FILE_KEY_PRIMITIVE: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_PRIMITIVE }}
+          FILE_KEY_SEMANTIC: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_SEMANTIC }}
+          FILE_KEY_COMPONENT: ${{ secrets.GH_ACTION_FIGMA_FILE_KEY_COMPONENT }}
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_ACTION_VARIABLES_SYNC_FIGMA_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,10 @@
 *storybook-static
 */src/data/search
 
+# yalc
+.yalc/
+yalc.lock
+
 #logs
 npm-debug.log*
 yarn-debug.log*
@@ -25,3 +29,5 @@ yarn-error.log*
 .tmp
 report*
 .DS_Store
+.native-web
+.tailwind-app
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -4,6 +4,11 @@
 __dirname="$(CDPATH= cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 __rootDir="$(CDPATH= cd "$($__dirname "${BASH_SOURCE[0]}")" && pwd)"
 
+echo "..Running design token checks"
+cd design-tokens
+npm run paddingY:verify
+npm run build
+cd ${__rootDir}
 echo "..Running aries-site checks"
 cd aries-site
 echo "....Linting checks for aries-site"

diff --git a/aries-site/_redirects b/aries-site/_redirects
@@ -1 +1,2 @@
 https://aries.hpe.design/* https://design-system.hpe.design/:splat 301!
+/tokens/* /design-tokens/:splat 307!
diff --git a/aries-site/src/data/structure.js b/aries-site/src/data/structure.js
@@ -1,25 +1,28 @@
 /* eslint-disable max-len */
 import { Grow } from 'grommet-icons/icons/Grow';
+import { Cube } from 'grommet-icons/icons/Cube';
 import { IconCircle, IconDiamond, IconSquare } from '../components';
 import {
   components as componentsArr,
   foundation as foundationArr,
   learn as learnArr,
+  tokens as tokensArr,
   templates as templatesArr,
   Structure,
 } from './structures';
 
 const components = Structure.from(componentsArr);
 const foundation = Structure.from(foundationArr);
 const learn = Structure.from(learnArr);
+const tokens = Structure.from(tokensArr);
 const templates = Structure.from(templatesArr);
 
 export const structure = [
   {
     name: 'Home',
     seoDescription:
       "The HPE Design System is the way Hewlett Packard Enterprise's brand, technology, and it's partners share a single language for application, web, and digital experiences.",
-    pages: ['Foundation', 'Components', 'Templates', 'Learn'],
+    pages: ['Foundation', 'Design tokens', 'Components', 'Templates', 'Learn'],
   },
   {
     name: 'Feedback',
@@ -38,7 +41,9 @@ export const structure = [
     color: 'green!',
     description:
       'These are the core elements of HPE that encompass the voice, language, and visuals that personify our brand and help establish and identify it from the rest of the community.',
-    icon: (size, color) => <IconCircle size={size} color={color} />,
+    icon: (size, color) => (
+      <IconCircle size={size} color={color} aria-hidden="true" />
+    ),
     seoDescription:
       'Foundational elements of HPE which encompass the voice, language, and visuals that personify our brand.',
     pages: foundation
@@ -51,7 +56,7 @@ export const structure = [
     color: 'blue!',
     description:
       'Learn foundational knowledge and best practices for how to build HPE applications with Grommet using these tutorials, how-to guides, and explanations.',
-    icon: (_, color) => <Grow color={color} />,
+    icon: (_, color) => <Grow color={color} aria-hidden="true" />,
     preview: {
       image: {
         src: {
@@ -70,7 +75,9 @@ export const structure = [
     color: 'orange!',
     description:
       'Jumpstart application design and development with use-case specific templates. Interactive templates demonstrate desired user experiences and the building block components used to create them.',
-    icon: (size, color) => <IconDiamond size={size} color={color} />,
+    icon: (size, color) => (
+      <IconDiamond size={size} color={color} aria-hidden="true" />
+    ),
     preview: {
       image: {
         src: {
@@ -92,7 +99,9 @@ export const structure = [
     color: 'purple!',
     description:
       'The component library provides a vetted set of interface elements for use in your applications and websites. All components are published in Figma for use in your designs. Web versions are built atop Grommet and styled by the HPE Theme providing the "building blocks" your application needs to be performant and compliant.',
-    icon: (size, color) => <IconSquare size={size} color={color} />,
+    icon: (size, color) => (
+      <IconSquare size={size} color={color} aria-hidden="true" />
+    ),
     preview: {
       image: {
         src: {
@@ -115,8 +124,28 @@ export const structure = [
     pages: [],
     pageLayout: 'plain',
   },
+  {
+    name: 'Design tokens',
+    color: 'purple',
+    description:
+      'Design tokens represent design decisions such as color, typography, spacing, and motion in a consistent, reusable, and tech-agnostic format.',
+    icon: (_, color) => <Cube color={color} aria-hidden="true" />,
+    preview: {
+      image: {
+        src: {
+          light: '/components-light.svg',
+          dark: '/components-dark.svg',
+        },
+        alt: 'HPE Cards Preview',
+      },
+    },
+    seoDescription:
+      'Design tokens represent design decisions such as color, typography, spacing, and motion in a consistent, reusable, and tech-agnostic format.',
+    pages: tokens.map(page => page.name),
+  },
   components,
   foundation,
   learn,
   templates,
+  tokens,
 ].flat();
diff --git a/aries-site/src/data/structures/components.js b/aries-site/src/data/structures/components.js
@@ -1736,15 +1736,18 @@ export const components = [
     name: 'Data',
     available: true,
     category: 'Data',
-    description:
-      'A wrapper component to enable turn-key presentation and management of data collections.',
+    description: 'Turnkey presentation and manipulation of data collections.',
     preview: {
       component: () => <DataHowTo />,
     },
     seoDescription:
-      'A wrapper component to enable turn-key presentation and management of data collections.',
+      'Turnkey presentation and manipulation of data collections.',
     sections: [],
-    relatedContent: [],
+    relatedContent: [
+      'Filtering',
+      'How to add search and filter to DataTable with Data',
+      'How to add additional controls to a toolbar',
+    ],
   },
   {
     name: 'ToggleGroup',

diff --git a/aries-site/src/data/structures/index.js b/aries-site/src/data/structures/index.js
@@ -2,4 +2,5 @@ export * from './components';
 export * from './foundation';
 export * from './learn';
 export * from './templates';
+export * from './tokens';
 export * from './Structure';
diff --git a/aries-site/src/data/structures/tokens.js b/aries-site/src/data/structures/tokens.js
@@ -0,0 +1,89 @@
+/* eslint-disable max-len */
+import { Figma, Code, Book, Table } from 'grommet-icons';
+import { Box, Text } from 'grommet';
+
+export const tokens = [
+  {
+    name: 'Overview',
+    type: 'Getting started',
+    description: 'The what and why of design tokens.',
+    preview: {
+      component: () => <Book size="xxlarge" color="text-strong" />,
+    },
+    seoDescription: 'The what and why of design tokens.',
+    sections: [],
+    relatedContent: ['How to read design tokens'],
+    tags: [],
+  },
+  {
+    name: 'How to read design tokens',
+    type: 'Getting started',
+    description:
+      'An explanation of HPE Design System design token naming conventions.',
+    preview: {
+      component: () => (
+        <Box align="center" direction="row" gap="small">
+          <Box background="brand" pad="medium" round="small" flex={false} />
+          <Text size="large">hpe.color.brand</Text>
+        </Box>
+      ),
+    },
+    seoDescription:
+      'An explanation of HPE Design System design token naming conventions.',
+    sections: [],
+    relatedContent: [
+      'All design tokens',
+      'Using design tokens in code',
+      'Using design tokens in Figma',
+    ],
+    tags: [],
+  },
+  {
+    name: 'Using design tokens in code',
+    type: 'Building with tokens',
+    description: 'How to map design tokens to code.',
+    preview: {
+      component: () => <Code size="xxlarge" color="text-strong" />,
+    },
+    seoDescription: 'How to map design tokens to code.',
+    sections: [],
+    relatedContent: [
+      'All design tokens',
+      'How to read design tokens',
+      'Using design tokens in Figma',
+    ],
+    tags: [],
+  },
+  {
+    name: 'Using design tokens in Figma',
+    type: 'Building with tokens',
+    description: 'How to use design tokens with Figma variables.',
+    preview: {
+      component: () => <Figma size="xxlarge" color="plain" />,
+    },
+    seoDescription: 'How to use design tokens with Figma variables.',
+    sections: [],
+    relatedContent: [
+      'All design tokens',
+      'How to read design tokens',
+      'Using design tokens in code',
+    ],
+    tags: [],
+  },
+  {
+    name: 'All design tokens',
+    type: 'Building with tokens',
+    description: 'An overview of all available design tokens.',
+    preview: {
+      component: () => <Table size="xxlarge" />,
+    },
+    seoDescription: 'An overview of all available design tokens.',
+    sections: [],
+    relatedContent: [
+      'How to read design tokens',
+      'Using design tokens in code',
+      'Using design tokens in Figma',
+    ],
+    tags: [],
+  },
+];