Merge pull request #400 from WestpacGEL/395-symbols-search-feature-an…

…d-symbols-are-missing-in-gel-next

395 symbols search feature and symbols are missing in gel next

apps/site/src/app/articles/[article]/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
+    // eslint-disable-next-line no-console
     console.error(error);
   }, [error]);
 

apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx

@@ -8,6 +8,7 @@ import { Colors } from '@/components/component-blocks/colors/colors.component';
 import { Icons } from '@/components/component-blocks/icons/icons.component';
 import { Logos } from '@/components/component-blocks/logos/logos.component';
 import { Pictograms } from '@/components/component-blocks/pictograms/pictograms.component';
+import { Symbols } from '@/components/component-blocks/symbols/symbols.component';
 import { Section } from '@/components/content-blocks/section';
 import { Code, Heading } from '@/components/document-renderer';
 import { RelatedInfo } from '@/components/related-info';
@@ -44,6 +45,7 @@ export function DesignContent({ designSections, description, relatedComponents }
                   icons: () => <Icons />,
                   logos: () => <Logos />,
                   pictograms: () => <Pictograms />,
+                  symbols: () => <Symbols />,
                   colors: props => <Colors palette={props.palette} />,
                 }}
               />

apps/site/src/app/design-system/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
+    // eslint-disable-next-line no-console
     console.error(error);
   }, [error]);
 

apps/site/src/components/component-blocks/foundation-blocks.tsx

@@ -2,10 +2,12 @@ import { colors } from './colors/colors.preview';
 import { icons } from './icons/icons.preview';
 import { logos } from './logos/logos.preview';
 import { pictograms } from './pictograms/pictograms.preview';
+import { symbols } from './symbols/symbols.preview';
 
 export const foundationBlocks = {
   colors,
   icons,
   logos,
   pictograms,
+  symbols,
 };

apps/site/src/components/component-blocks/symbols/symbols.component.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { Grid, Item } from '@westpac/ui/grid';
+import { Input } from '@westpac/ui/input';
+import * as AllLogos from '@westpac/ui/symbol';
+import { ChangeEvent, useCallback, useMemo, useState } from 'react';
+
+export const Symbols = () => {
+  const [search, setSearch] = useState('');
+
+  const filteredSymbols = useMemo(() => {
+    return Object.entries(AllLogos).reduce(
+      (acc: { Logo: React.FC<AllLogos.SymbolProps>; key: string }[], [logoName, Logo]) => {
+        if (logoName.toUpperCase().indexOf(search.toUpperCase()) === -1 || !logoName.includes('Symbol')) {
+          return acc;
+        }
+        return [...acc, { key: logoName, Logo }];
+      },
+      [],
+    );
+  }, [search]);
+
+  const foundText = filteredSymbols.length === 1 ? 'Found 1 symbol' : `Found ${filteredSymbols.length} symbols`;
+
+  const handleOnChange = useCallback(({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+    setSearch(value);
+  }, []);
+
+  return (
+    <div>
+      <div className="bg-light mb-4 p-4">
+        <Grid>
+          <Item span={{ initial: 12, sm: 6 }}>
+            <div className="flex flex-col items-start sm:flex-row sm:items-center">
+              <label className="mb-2 mr-[1rem] sm:mb-0" htmlFor="filter-icons">
+                Filter by name
+              </label>
+              <Input id="filter-icon" value={search} onChange={handleOnChange} className="w-full" />
+            </div>
+          </Item>
+        </Grid>
+      </div>
+      <Grid>
+        <Item span={12}>
+          <p className="text-muted text-right italic">{foundText}</p>
+        </Item>
+        {filteredSymbols.map(({ key, Logo }) => (
+          <Item key={key} span={{ initial: 12, sm: 6, md: 4, lg: 3 }} className="flex">
+            <div className="xsl:mb-4 mb-2 flex grow flex-col items-center justify-center bg-white px-2 pb-3 pt-6">
+              <Logo className="mb-6" />
+              <span className="text-muted text-[0.6875rem]">{key}</span>
+            </div>
+          </Item>
+        ))}
+      </Grid>
+    </div>
+  );
+};

apps/site/src/components/component-blocks/symbols/symbols.preview.tsx

@@ -0,0 +1,11 @@
+import { NotEditable, component } from '@keystatic/core';
+
+export const symbols = component({
+  preview: () => (
+    <NotEditable>
+      <div>All Symbols</div>
+    </NotEditable>
+  ),
+  label: 'Symbols',
+  schema: {},
+});

apps/site/src/content/design-system/components/symbol/design/third-party-symbols/content.mdoc

@@ -1,47 +1 @@
-Filter by name
-
-Found 22 symbols
-
-AmericanExpressSymbol
-
-AppleStoreInverseSymbol
-
-AppleStoreSymbol
-
-BPayLandSymbol
-
-BPayPortSymbol
-
-FacebookSymbol
-
-GooglePlusSymbol
-
-GoogleStoreSymbol
-
-InstagramSymbol
-
-LinkedInSymbol
-
-MastercardAcceptedSymbol
-
-MastercardHorizontalSymbol
-
-MastercardSymbol
-
-MicrosoftStoreSymbol
-
-PayIDSymbol
-
-SlackSymbol
-
-TwitterSymbol
-
-VisaBlueSymbol
-
-VisaSymbol
-
-VisaWhiteSymbol
-
-YammerSymbol
-
-YouTubeSymbol
+{% symbols /%}

apps/site/src/content/design-system/components/symbol/index.yaml

@@ -8,15 +8,19 @@ design:
   - title:
       name: Third Party Symbols
       slug: third-party-symbols
+    noTitle: false
   - title:
       name: User experience
       slug: user-experience
+    noTitle: false
   - title:
       name: Visual design
       slug: visual-design
+    noTitle: false
   - title:
       name: Dos and don’ts
       slug: dos-and-donts
+    noTitle: false
 accessibility:
   - title:
       name: Accessibility features
@@ -27,3 +31,4 @@ accessibility:
   - title:
       name: Accessibility API
       slug: accessibility-api
+relatedInformation: []

helpers/create-package/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const shell = require('child_process').execSync;
 const fs = require('fs');
 const readline = require('readline');

packages/eslint-config/index.js

@@ -50,6 +50,7 @@ module.exports = {
         ignoredKeys: ['compoundVariants', 'defaultVariants', 'responsiveVariants', 'compoundSlots'],
       },
     ],
+    'no-console': 'error',
   },
   settings: {
     'import/parsers': {

packages/ui/src/components/alert/alert.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { TelephoneIcon } from '../icon/index.js';

packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { CheckboxGroup } from './checkbox-group.component.js';

packages/ui/src/components/date-picker/date-picker.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 

packages/ui/src/components/icon/icon.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 
@@ -35,15 +36,15 @@ const AllIconsExample = (props: AllIcons.IconProps) => {
   return (
     <div className="flex flex-col gap-2">
       <input
-        className="rounded-sm border border-border px-3 py-2"
+        className="border-border rounded-sm border px-3 py-2"
         onChange={handleOnChange}
         placeholder="e.g: Accessibiliy"
       />
       <div className="flex flex-row flex-wrap justify-center gap-2">
         {filteredIcons.map(({ key, Icon }) => (
           <button
             onClick={() => handleOnClick(key)}
-            className="flex h-15 w-23 flex-col items-center justify-center gap-2 border border-border"
+            className="h-15 w-23 border-border flex flex-col items-center justify-center gap-2 border"
             key={key}
           >
             <Icon {...props} />

packages/ui/src/components/radio-group/radio-group.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { RadioGroup } from './radio-group.component.js';

packages/ui/src/components/repeater/repeater.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { Form, Input } from '../index.js';

packages/ui/utils/build-icons/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import fs from 'fs';
 import path from 'path';