wix-style-react/src/Palette/docs/Palette.content.js

wix-style-react

export default {
  description: 'Palette displays a set of colors.',
  do: [
    'Use it to represent a set of solid colors, gradients or images.',
    'Use it to display available styles to choose from.',
  ],
  dont: [
    'Don’t use it to select a fill option from a set. Use <Swatches/> instead.',
  ],
  featureExamples: [
    {
      title: 'Fills',
      description: `Add any number of fill options inside of a palette. `,
      example: '_fills',
    },
    {
      title: 'Type',
      description: `Accepts following \`fill types\`:<br/>
        &emsp;- \`solid color\` <br/>
        &emsp;- \`gradient\` <br/>
        &emsp;- \`image\``,
      example: '_type',
    },
    {
      title: 'Dimensions',
      description: `Control component dimensions with a parent container. 
        Component have no dimensions of its own - It inherits the width and height of a container it is wrapped to. `,
      example: '_dimensions',
    },
  ],
  commonUseCaseExamples: [
    {
      title: 'Form Field',
      description: `Use \`<FormField/>\` to give the palette a label.`,
      example: '_formField',
    },
    {
      title: 'Thumbnail',
      description: `Create a selection of palette using \`<Thumbnail/>\` component.`,
      example: '_thumbnail',
    },
    {
      title: 'Composer',
      description: `Use a palette in a variety of composer side panels to allow users to select themes for their designs.`,
      example: '_composer',
    },
  ],
};